<template>
	<view>
		<comHeader :config="navConfig"/>
			<view class="dlWrap">
				<view class="dlInput_psd">
					<view class="dlInput_numb">
					<text>手机号</text>
					<input 
					type="type" 
					placeholder="18205084589" 
					placeholder-style="color:#CCCCCC"
					placeholder-class="placecLass"
					@input="focusClass1"
					:class="[isActive1 ? 'blueBorder' : '']"/>
					</view>
					<!-- <view><uni-icon type="arrowdown" size="20" color="#A7A7A7"></uni-icon></view> -->
				</view>
				<!-- 验证码登录-->
				<view class="yzmLog">
					<view>
					<input 
					type="password" 
					placeholder="请输入短信验证码" 
					placeholder-style="color:#CCCCCC"
					placeholder-class="placecLass"
					@input="focusClass2"
					:class="[isActive2 ? 'blueBorder' : '']"/>
					<view class="getYzm" @tap="TimeBtn"><text>{{countdown}}</text><text v-if="timeStatus">s</text></view>
					</view>
				</view>
				<view class="goIndex" @tap="goLog">确认</view>
			</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				navConfig:{
					isFixed:false, 
					left:{
						text:'',  
						isShowLeft:true,
						leftGobackColor:'black',
						leftTextColor:'black',
					},
					mid:{
						isShowMid:true,
						text:'忘记密码'
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				isActive5:false,
				isActive6:false,
				isActive7:false,
				isShowStep:'',//向上传递给父组件
				countdown:'获取验证码',
				timeStatus:false, //s秒
				disabled:false //重新获取按钮是否开启
			}
		},
		methods:{
			nextStep(){
				this.isShowStep = 'psd';
				this.$emit('sendShowYzm',this.isShowStep)
			},
			goLog(){
				uni.navigateTo({
					url:'/pages/login/setPsd'
				})
			},
			TimeBtn(){
				this.countdown = 60;
				
				this.timeStatus = true;
				let timer = setInterval(()=>{
					--this.countdown
				},1000)
				setTimeout(()=>{
					clearInterval(timer);
					this.timeStatus = false;
					this.countdown = '重新获取';
				},60000);
				if(this.countdown == '重新获取'){
					this.disabled = false
				}else{
					this.disabled = true
				}
				console.log(typeof(this.countdown));
			},
		}	
	}
</script>

<style>
	.dlWrap{
		margin:0upx 56upx 0 56upx;
		padding-top: 184upx;
	}
	.dlInput_psd{
		margin-top: 76upx;
		padding-bottom:20upx;
		height:46upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1upx solid #DCDCDC;
		justify-content: space-between;
	}
	.dlInput_psd text{
		color: #333333;
		font-size: 28upx;
	}
	.dlInput_psd input{
		margin-left:70upx;
		height:46upx;
		line-height:46upx;
		color: #333;
		font-size: 28upx;
	}
	.dlInput_numb{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	/* .blueBorder{
		border-bottom: 1upx solid #55A0FF!important;
	} */
	.goIndex{
		height: 88upx;
		line-height: 88upx;
		border-radius:88upx;
		font-size: 28upx;
		background: linear-gradient(left,#54AAFF,#568FFF);
		text-align: center;
		color: #ffffff;
		margin-top:110upx;
	}
	
	
	.getYzm{
		width:190upx;
		height: 63upx;
		line-height: 63upx;
		background: #559DFF;
		border-radius: 10upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 24upx;
	}
	.yzmLog{
	margin-top: 76upx;
	height:46upx;
	}
	.yzmLog > view{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.yzmLog input{
		height:46upx;
		line-height:46upx;
		color: #333;
		width:428upx;
		font-size: 28upx;
		padding-bottom:20upx;
		border-bottom: 1upx solid #DCDCDC;
	}
</style>
